<template>
  <div class="advertisement">
    <el-card shadow="always">
      <div slot="header">
        <el-button
          type="primary"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </div>
      <el-table :data="list" border stripe style="width: 100%">
        <el-table-column
          type="index"
          label="#"
          fixed="left"
          :width="74"
          align="center"
        />
        <el-table-column
          label="广告图片"
          prop="pic"
          :width="150"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.pic" alt="" srcset="" class="pic">
          </template>
        </el-table-column>
        <el-table-column label="时间" :width="300" align="center">
          <template slot-scope="scope">
            <div class="time">开始时间: {{ scope.row.startTime }}</div>
            <div class="time">结束时间: {{ scope.row.endTime }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="广告名称"
          prop="name"
          :width="300"
          align="center"
        />
        <el-table-column
          label="点击数"
          prop="clickCount"
          :width="150"
          align="center"
        />
        <el-table-column
          label="下单数"
          prop="orderCount"
          :width="150"
          align="center"
        />
        <!-- : 轮播位置：0->app首页轮播 , -->
        <el-table-column
          label="轮播位置"
          prop="type"
          :width="150"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.type == 0 ? "首页轮播" : "其他" }}
          </template>
        </el-table-column>
        <el-table-column
          label="链接地址"
          prop="url"
          :width="150"
          align="center"
        />
        <el-table-column label="备注" prop="note" :width="300" align="center" />
        <!-- 0->下线；1->上线 , -->
        <el-table-column
          label="上下线状态"
          prop="status"
          :width="180"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.status == 0 ? "下线" : "上线 " }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" :width="150" align="center">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="mini" @click="handleEdit(scope.row)">编辑</el-button>

              <el-button
                type="text"
                size="mini"
                style="color: red"
                @click="handleDel(scope.row)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <DetailDialog ref="detalRef" />
  </div>
</template>
<script>
import { adsList, delAds } from '@/api/market/advertisement/index'

import DetailDialog from './components/Detail'
export default {
  components: {
    DetailDialog
  },
  filters: {
    isOut(val) {
      return new Date(val).getTime() < Date.now() ? '过期' : '否'
    }
  },
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getAdsList()
  },
  methods: {
    // 获取广告列表
    async getAdsList() {
      const { success, data, message } = await adsList()
      if (success) {
        this.list = data.items
      } else {
        this.$message.error(message)
      }
    },
    // 新增
    handleAdd() {
      this.$refs.detalRef.open()
    },
    // 编辑
    handleEdit(item) {
      this.$refs.detalRef.open(item)
    },
    // 删除
    handleDel(item) {
      this.$confirm('此操作会永久删除该数据,是否继续', '提示', {
        type: 'warning'
      }).then(async() => {
        const { success, message } = await delAds(item.id)
        if (success) {
          this.$message.success('删除成功')
          this.getAdsList()
        } else {
          this.$message.error(message)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.advertisement {
  margin: 30px;
  .pic {
    width: 100px;
    height: 100px;
  }
  .time {
    margin: 14px 0;
  }
}
</style>
